/*
* M-picker
*/
.M-calendar-picker{
  display: inline-block;
  position: relative;
  .M-calendar-picker-input-area{
    position: relative;
    display: inline-block;
    cursor: pointer;
    .M-calendar-picker-icon,.M-calendar-picker-clear{
      position: absolute;
      width: 14px;
      height: 14px;
      right: 8px;
      top: 50%;
      margin-top: -7px;
      line-height: 14px;
      font-size: 12px;
      -webkit-transition: all .3s;
      transition: all .3s;
      -webkit-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
      user-select: none;
      i{
        font-size: inherit;
      }
    }
    .M-calendar-picker-icon{
      color: rgba(0,0,0,.43);
      &:after{
        font-family: anticon;
        font-size: 12px;
        color: rgba(0,0,0,.43);
        display: inline-block;
        line-height: 1;
      }
    }
    .M-calendar-picker-clear{
      cursor: pointer;
      opacity: 0;
      z-index: 10;
      color: rgba(0,0,0,.25);
      background: #fff;
      pointer-events: none;
    }
    &:hover{
      .M-calendar-picker-clear{
        opacity: 1;
        pointer-events: auto
      }
    }
  }
  .M-calendar-picker-container{
    position: absolute;
    z-index: 1050;
    transition: all .3s;
    transform: scaleY(0);
    opacity: 0;
    box-shadow: 0 1px 6px rgba(0,0,0,.2);
    color: rgba(0,0,0,.65);
    // padding: 4px 8px;
    // position: relative;
    outline: none;
    width: 231px;
    border: 1px solid #fff;
    list-style: none;
    font-size: 12px;
    text-align: left;
    background-color: #fff;
    border-radius: 4px;
    
    /*  header的高度 */
    .M-calendar-header{
      height: 34px;
      text-align: center;
      -webkit-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
      user-select: none;
      border-bottom: 1px solid #e9e9e9;
      position: relative;
      .M-calendar-date-prev-year-btn,
      .M-calendar-date-prev-month-btn,
      .M-calendar-date-next-month-btn,
      .M-calendar-date-next-year-btn,
      .M-calendar-month-panel-prev-year-btn,
      .M-calendar-month-panel-next-year-btn,
      .M-calendar-year-panel-prev-decade-btn,
      .M-calendar-year-panel-next-decade-btn,
      .M-calendar-decade-panel-prev-century-btn,
      .M-calendar-decade-panel-next-century-btn{
        position: absolute;
        top: 0;
        color: rgba(0,0,0,.43);
        font-family: Arial,Hiragino Sans GB,Microsoft Yahei,Microsoft Sans Serif,sans-serif;
        padding: 0 5px;
        font-size: 16px;
        display: inline-block;
        line-height: 34px;
      }
      .M-calendar-date-prev-year-btn,
      .M-calendar-month-panel-prev-year-btn,
      .M-calendar-year-panel-prev-decade-btn,
      .M-calendar-decade-panel-prev-century-btn{
        left: 7px;
        &:after{
          content: "\AB";
        }
      }
      .M-calendar-date-prev-month-btn{
        left: 29px;
        &:after{
          content: "\2039";
        }
      }
      .M-calendar-date-next-month-btn{
        right: 29px;
        &:after{
          content: "\203A";
        }
      }
      .M-calendar-date-next-year-btn,
      .M-calendar-month-panel-next-year-btn,
      .M-calendar-year-panel-next-decade-btn,
      .M-calendar-decade-panel-next-century-btn,{
        right: 7px;
        &:after{
          content: "\BB";
        }
      }
      .M-calendar-date-month-select,
      .M-calendar-date-year-select,
      .M-calendar-month-panel-year-select,
      .M-calendar-year-panel-decade-select,
      .M-calendar-decade-panel-century-select{
        padding: 0 2px;
        font-weight: 700;
        display: inline-block;
        color: rgba(0,0,0,.65);
        line-height: 34px;
      }
    }
    /* table的高度 */
    .M-calendar-tabel-parent{
      padding: 4px 8px;
      height: 208px;
      .M-calendar-date-table,
      .M-calendar-month-panel-table,
      .M-calendar-year-panel-table,
      .M-calendar-decade-panel-table{
        border-collapse: collapse;
        max-width: 100%;
        background-color: transparent;
        width: 100%;
        height: 100%;
      }
    }


    .M-calendar-date-body{ 
      .M-calendar-date-table{
        .M-calendar-date-column-header{
          line-height: 18px;
          width: 33px;
          padding: 6px 0;
          text-align: center;
          .M-calendar-date-column-header-inner{
            display: block;
            font-weight: 400;
          }
        }
        .M-calendar-date{
          display: block;
          margin: 0 auto;
          color: rgba(0,0,0,.65);
          border-radius: 2px;
          width: 20px;
          height: 20px;
          line-height: 18px;
          border: 1px solid transparent;
          padding: 0;
          background: transparent;
          text-align: center;
          -webkit-transition: background .3s ease;
          transition: background .3s ease;
          &:hover{
            background: #ecf6fd;
            cursor: pointer
          }
          &:active{
            color: #fff;
            background: #49a9ee
          }
        }
        .M-calendar-date-last-month-cell,.M-calendar-date-next-month-cell{
          .M-calendar-date{
            color: rgba(0,0,0,.25);
          }
        }
        .M-calendar-date-today{
          .M-calendar-date{
            border-color: #108ee9;
            font-weight: 700;
            color: #108ee9;
          }
        }
        .M-calendar-date-selected-day{
          .M-calendar-date{
            background: #108ee9;
            color: #fff;
            border: 1px solid transparent;
          }
        }
      }
    }

    /* MonthPicker   */
    /*
    .M-calendar-month-panel-header{
      .M-calendar-month-panel-prev-year-btn,
      .M-calendar-month-panel-next-year-btn{
      }
      .M-calendar-month-panel-prev-year-btn{
      }
      .M-calendar-month-panel-next-year-btn{
      }
      .M-calendar-month-panel-year-select{
      }
    }
    */

    .M-calendar-month-panel-body{
      .M-calendar-month-panel-table{
        .M-calendar-month-panel-cell{
          text-align: center;
          .M-calendar-month-panel-month{
            display: inline-block;
            margin: 0 auto;
            color: rgba(0,0,0,.65);
            background: transparent;
            text-align: center;
            height: 24px;
            line-height: 24px;
            padding: 0 6px;
            border-radius: 4px;
            -webkit-transition: background .3s ease;
            transition: background .3s ease;
            &:hover{
              background: #ecf6fd;
              cursor: pointer
            }
            &:active{
              color: #fff;
              background: #49a9ee
            }
          }
        }
        .M-calendar-month-panel-selected-cell{
          .M-calendar-month-panel-month{
            background: #108ee9;
            color: #fff;
          }
        }
      }
    }

    /* YearPicker   */
    /*
    .M-calendar-year-panel-header{
      .M-calendar-year-panel-prev-decade-btn,
      .M-calendar-year-panel-next-decade-btn{
      }
      .M-calendar-year-panel-prev-decade-btn{
      }
      .M-calendar-year-panel-next-decade-btn{
      }
      .M-calendar-year-panel-decade-select{
      }
    }
    */
    .M-calendar-year-panel-body{
      .M-calendar-year-panel-table{
        .M-calendar-year-panel-cell{
          text-align: center;
          .M-calendar-year-panel-year{
            display: inline-block;
            margin: 0 auto;
            color: rgba(0,0,0,.65);
            background: transparent;
            text-align: center;
            height: 24px;
            line-height: 24px;
            padding: 0 6px;
            border-radius: 4px;
            -webkit-transition: background .3s ease;
            transition: background .3s ease;
            &:hover{
              background: #ecf6fd;
              cursor: pointer
            }
            &:active{
              color: #fff;
              background: #49a9ee
            }
          }
        }
        .M-calendar-year-panel-selected-cell{
          .M-calendar-year-panel-year{
            background: #108ee9;
            color: #fff;
          }
        }
        .M-calendar-year-panel-last-decade-cell,
        .M-calendar-year-panel-next-decade-cell{
          .M-calendar-year-panel-year{
            // background: #108ee9;
            color: rgba(0,0,0,.25);
          }
        }
      }
    }

    /* DecadePicker   */
    /*
    .M-calendar-decade-panel-header{
      .M-calendar-decade-panel-prev-century-btn,
      .M-calendar-decade-panel-next-century-btn{
      }
      .M-calendar-decade-panel-prev-century-btn{
      }
      .M-calendar-decade-panel-next-century-btn{
      }
      .M-calendar-decade-panel-century-select{
      }
    }
    */
    
    .M-calendar-decade-panel-body{
      .M-calendar-decade-panel-table{
        .M-calendar-decade-panel-cell{
          text-align: center;
          white-space: nowrap;
          .M-calendar-decade-panel-decade{
            display: inline-block;
            margin: 0 auto;
            color: rgba(0,0,0,.65);
            background: transparent;
            text-align: center;
            height: 24px;
            line-height: 24px;
            padding: 0 6px;
            border-radius: 4px;
            -webkit-transition: background .3s ease;
            transition: background .3s ease;
            &:hover{
              background: #ecf6fd;
              cursor: pointer
            }
            &:active{
              color: #fff;
              background: #49a9ee
            }
          }
        }
        .M-calendar-decade-panel-selected-cell{
          .M-calendar-decade-panel-decade{
            background: #108ee9;
            color: #fff;
          }
        }
        .M-calendar-decade-panel-last-century-cell,
        .M-calendar-decade-panel-next-century-cell{
          .M-calendar-decade-panel-decade{
            // background: #108ee9;
            color: rgba(0,0,0,.25);
          }
        }
      }
    }
  }
  .M-calendar-picker-container-placement-topLeft{
    top: 0;
    left: 0;
  }
  .M-calendar-picker-container-placement-topRight{
    top: 0;
    right: 0;
  }
  .M-calendar-picker-container-placement-bottomLeft{
    top: 100%;
    left: 0;
  }
  .M-calendar-picker-container-placement-bottomRight{
    top: 100%;
    right: 0;
  }
  table,td,th{
    border: 0
  }
}

.M-calendar-cell{
  padding: 4px 0;
}
/*
* animate
*/
.M-calendar-picker-open{
  .M-calendar-picker-container{
    animation: MPickerDropDown 0.3s linear;
    animation-fill-mode:forwards;
  }
}
@keyframes MPickerDropDown{
  0% {
    opacity: 0;
    transform-origin: 0% 0%;
    transform: scaleY(0.8);
  }
  100%{
    opacity: 1;
    transform-origin: 0% 0%;
    transform: scaleY(1);
  }
}